<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- 引入bootstrap -->
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
      integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu"
      crossorigin="anonymous"
    />

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script
      src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"
      integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd"
      crossorigin="anonymous"
    ></script>

    <!-- 引入jQ -->
    <script src="https://code.jquery.com/jquery-3.6.0.js"></script>

    <style>
      * {
        margin: 0;
        padding: 0;
      }

      .mybox {
        width: 500px;
        margin: auto;
        margin-top: 20px;
      }

      .my-table {
        width: 1000px;
        margin: auto;
        margin-top: 50px;
      }
      .table > tbody > td {
        line-height: 9.428571 !important;
      }
      th,
      td {
        text-align: center;
      }

      .paging {
        width: 300px;
        height: 50px;
        /* border: 1px solid red; */
        margin: 20px auto;
        font-size: 18px;
        line-height: 50px;
      }
      .paging ul {
        list-style: none;
      }
      .paging ul li {
        width: 20px;
        height: 20px;
        float: left;
        margin-right: 20px;
        cursor: pointer;
      }
      a {
        color: #1e9fff;
        text-decoration: none;
      }
    </style>
  </head>
  <body>
    <div class="form-horizontal mybox">
      <div class="form-group">
        <label for="inputEmail3" class="col-sm-2 control-label">商品名称</label>
        <div class="col-sm-10">
          <input
            type="text"
            class="form-control"
            id="goods_name"
            placeholder="请输入商品名称"
          />
        </div>
      </div>
      <div class="form-group">
        <label for="inputEmail3" class="col-sm-2 control-label">商品库存</label>
        <div class="col-sm-10">
          <input
            type="number"
            class="form-control"
            id="stock"
            placeholder="请输入商品库存"
          />
        </div>
      </div>
      <div class="form-group">
        <label for="inputEmail3" class="col-sm-2 control-label">商品价格</label>
        <div class="col-sm-10">
          <input
            type="text"
            class="form-control"
            id="price"
            placeholder="请输入商品价格"
          />
        </div>
      </div>
      <div class="form-group">
        <label for="inputEmail3" class="col-sm-2 control-label">商品状态</label>
        <label class="radio-inline">
          <select name="" class="form-control" id="status">
            <option value="0">请选择</option>
            <option value="1">1（上架）</option>
            <option value="2">2（下架）</option>
          </select>
        </label>
      </div>
      <div class="form-group">
        <label for="inputEmail3" class="col-sm-2 control-label">商品已售</label>
        <div class="col-sm-10">
          <input
            type="text"
            class="form-control"
            id="sold"
            placeholder="请输入商品已售"
          />
        </div>
      </div>
      <div class="form-group">
        <label for="inputEmail3" class="col-sm-2 control-label">商品图片</label>
        <div class="col-sm-10">
          <input
            type="text"
            class="form-control"
            id="img"
            placeholder="请输入图片链接地址"
          />
        </div>
      </div>
      <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
          <input
            type="button"
            class="btn btn-default"
            id="addTo"
            value="添加"
            style="background-color: #1e9fff; color: #fff"
          />
        </div>
      </div>
    </div>
    <!-- //列表 -->
    <div id="my-list" class="my-table">
      <div style="width: 500px">
        <div class="col-sm-12" style="width: 300px">
          <input
            type="text"
            class="form-control"
            id="search"
            placeholder="搜索"
          />
        </div>
        <br /><br />
      </div>

      <table
        id="table"
        class="table table-bordered table-hover"
        style="margin-top: 20px; font-size: 17px"
      >
        <thead>
          <tr>
            <th>商品id</th>
            <th>商品图片</th>
            <th>商品名称</th>
            <th onclick="sort_s()" style="cursor: pointer">商品库存</th>
            <th onclick="sort_d()" style="cursor: pointer">商品已售</th>
            <th onclick="sort_p()" style="cursor: pointer">商品价格</th>
            <th>商品状态</th>
            <th>创建时间</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>id</td>
            <td>商品</td>
            <td>商品名称</td>
            <td>商品库存</td>
            <td>商品已售</td>
            <td>商品价格</td>
            <td>商品状态</td>
            <td>创建时间</td>
            <td>操作</td>
          </tr>
        </tbody>
      </table>
      <div class="paging">
        <ul>
          <li style="color: #1e9fff">1</li>
          <li>2</li>
          <li>3</li>
          <li>4</li>
          <li>5</li>
          <li>6</li>
          <li>7</li>
        </ul>
      </div>
    </div>
    <script>
      //声明升序:asc 降序：desc
      var desc = "desc";
      var asc = "asc";
      //价格:price  库存:stock 已售:sold
      var price = "price";
      var stock = "stock";
      var sold = "sold";
      // 更新
      var ID;
      // 页码
      var page = 1;
      $(function () {
        //页面加载完毕就渲染
        getData(page);
        // 添加按钮
        $("#addTo").click(addTo);
        //搜索
        $("#search").change(search);
        //页码
        $(".paging li").click(paging);
      });
      // 页码
      function paging() {
        $(this).css("color", "#1e9fff").siblings().css("color", "black");
        page = $(this).html();
        getData(page);
      }
      // 编辑商品
      function updates(index) {
        if ($("#addTo").val() === "添加") {
          $("#addTo").val("编辑");
        }
        $.ajax({
          type: "get",
          async: false,
          url: `https://liu.zzgoodqc.cn/goods/detail?id=${index}`,
          data: {
            id: index,
          },
          dataType: "json",
          success: function (res) {
            if (res.code === 200) {
              var data = res.data;
              ID = data.id;
              console.log(res.data);
              $("#goods_name").val(data.goods_name),
                $("#stock").val(data.stock),
                $("#price").val(data.price),
                $("#sold").val(data.sold);
              $("#img").val(data.img);
              $("#status").val(data.status);
            }
          },
        });
      }
      // 搜索
      function search() {
        $.ajax({
          type: "post",
          url: "https://liu.zzgoodqc.cn/goods/search",
          data: {
            goods_name: $("#search").val(),
          },
          dataType: "json",
          success: function (res) {
            showList(res.data);
          },
        });
      }
      //添加按钮
      function addTo() {
        if ($("#addTo").val() === "编辑") {
          $.ajax({
            type: "post",
            url: "https://liu.zzgoodqc.cn/goods/update",
            dataType: "json",
            data: {
              id: ID,
              goods_name: $("#goods_name").val(),
              stock: $("#stock").val(),
              price: $("#price").val(),
              status: $("#status").val(),
              sold: $("#sold").val(),
              img: $("#img").val(),
            },
            success: function (res) {
              if (res.code === 200) {
                alert("修改成功");
                $("#addTo").val("添加");
                $("#goods_name").val("");
                $("#price").val("");
                $("#stock").val("");
                $("#sold").val("");
                $("#img").val("");
                $("#status:first").val("");
                getData(page);
              }
            },
          });
        } else if ($("#addTo").val() === "添加") {
          $.ajax({
            type: "post",
            url: "https://liu.zzgoodqc.cn/goods/add",
            dataType: "json",
            data: {
              goods_name: $("#goods_name").val(),
              stock: $("#stock").val(),
              price: $("#price").val(),
              status: $("#status").val(),
              sold: $("#sold").val(),
              img: $("#img").val(),
            },
            success: function (res) {
              if (res.code === 200) {
                alert("添加成功");
                getData(page);
              }
            },
          });
        }
      }
      //删除商品

      function del(index) {
        $.ajax({
          type: "get",
          url: `https://liu.zzgoodqc.cn/goods/delete?id=${index}`,
          dataType: "json",
          success: function (res) {
            if (res.code === 200) {
              alert("删除成功");
              getData(page);
            }
          },
        });
      }
      //查看商品
      function see(index) {
        $.ajax({
          type: "get",
          async: false,
          url: `https://liu.zzgoodqc.cn/goods/detail?id=${index}`,
          data: {
            id: index,
          },
          dataType: "json",
          success: function (res) {
            if (res.code === 200) {
              var data = res.data;
              console.log(res.data);
              alert(`
              id:${data.id}
              商品名：${data.goods_name}
              库存：${data.stock}
              价格：${data.price}￥
              已售：${data.sold}
              商品状态：${data.status == 1 ? "已上架" : "已下架"}
              创建时间:${data.created_at}
              `);
            }
          },
        });
      }
      //根据价格排序
      function sort_p() {
        $.ajax({
          type: "get",
          url: `https://liu.zzgoodqc.cn/goods/sort?sort=${desc}&type=${price}&page=1&limit=5`,
          dataType: "json",
          success: function (res) {
            if (res.code === 200) {
              var data = res.data;
              showList(data);
            }
          },
        });
      }
      //根据库存排序
      function sort_s() {
        $.ajax({
          type: "get",
          url: `https://liu.zzgoodqc.cn/goods/sort?sort=${asc}&type=${stock}&page=1&limit=5`,
          dataType: "json",
          success: function (res) {
            if (res.code === 200) {
              var data = res.data;
              showList(data);
            }
          },
        });
      }
      //根据已售排序
      function sort_d() {
        $.ajax({
          type: "get",
          url: `https://liu.zzgoodqc.cn/goods/sort?sort=${desc}&type=${sold}&page=1&limit=5`,
          dataType: "json",
          success: function (res) {
            if (res.code === 200) {
              var data = res.data;
              showList(data);
            }
          },
        });
      }
      //渲染表格
      function showList(data) {
        var html = "";
        for (let i in data) {
          html += `
                <tr>
                    <td>${data[i].id}</td>
                    <td><img src="${
                      data[i].img
                    }" style="width:100px;height:100px; vertical-align: middle"></td>
                    <td>${data[i].goods_name}</td>
                    <td>${data[i].stock}</td>
                    <td>${data[i].sold}</td>
                    <td>${data[i].price}</td>
                    <td>${data[i].status == 1 ? "已上架" : "已下架"}</td>
                    <td>${data[i].created_at}</td>
                    <td>
                        <a href="javascript:" onclick="del(${
                          data[i].id
                        })">删除</a>
                        <a href="javascript:" onclick="see(${
                          data[i].id
                        })">查看</a><a href="javascript:" onclick="updates(${
            data[i].id
          })">编辑</a>
                    </td>
                </tr>`;
        }
        $("tbody").html(html);
      }
      //获取列表
      function getData(page) {
        $.ajax({
          type: "get",
          url: `https://liu.zzgoodqc.cn/goods/listByPage?page=${page}&limit=5`,
          dataType: "json",
          data: {
            goods_name: $("#goods_name").val(),
            stock: $("#stock").val(),
            price: $("#price").val(),
            status: $("#status").val(),
            sold: $("#sold").val(),
            img: $("#img").val(),
          },
          success: function (res) {
            var data = res.data;
            showList(data);
          },
        });
      }
    </script>
  </body>
</html>
